<template>
  <div class="tree" v-for="(item, index) in treeList" :key="index">
    {{ item.name }}
    <button @click="send(item)">trans</button>
    <!-- 在组件中使用组件自身，实现递归组件，且需要设置 v-if 来终止递归 -->
    <!-- 如果需接受递归组件传递的数据，需要在使用的组件标签上设置自定义事件 -->
    <TreeItem v-if="item.children?.length" :treeList="item.children" @on-click="send"></TreeItem>
  </div>
</template>
<script setup lang="ts">
import { TreeList } from '../../types'
interface Props {
  treeList: TreeList[]
}
defineProps<Props>()
const emit = defineEmits(['on-click'])
const send = (item: TreeList) => {
  emit('on-click', item)
}
</script>

<script lang="ts">
// 递归组件需另起一个 script 标签，在该标签中导出自己，并自身调用
export default {
  name: 'TreeItem',
}
</script>
<style scoped>
.tree {
  padding-left: 10px;
}
</style>
